<template>
	<div class="Echarts">
		<div ref="myChart" id="myChart" class="inMain" style="width: 132px;height: 132px"></div>
	</div>
</template>

<script>
	export default {
		name: 'industryEc',
		props:{
		    dataitem:{
				type:Array,
				required:true
		    }
		},
		watch:{
		   dataitem(val){
				this.$nextTick(()=>{
					this.myEcharts()
				})
		   }
		},
		methods: {
			myEcharts() {
				
				let myChart = this.$echarts.getInstanceByDom(this.$refs.myChart);
				let myColor=['#E3A693','#01ECFF','#D5A4E2','#1D96FC','rgba(3, 16, 38, 0.71)'];
				let itemData = this.dataitem;
				//配置图表
				if (myChart == null) {
					myChart = this.$echarts.init(this.$refs.myChart); //利用原型调取Echarts的初始化方法
				}
				const option = {
					color:myColor,
					title:{
						text:`· 2019 ·`,
						textStyle: {
						      fontSize: 15,
						      color: "#DFF8FF"
						},
						bottom:1,
						left:'center'
					},
					tooltip: {
						trigger: 'item',
						formatter:function(params){
							if(params.value==0){
								return params.name+'<br>'+params.value+'%'
							}else{
								return params.name+'<br>'+params.value+'%'
							}
						} 
					},
					series: [{
						type: "pie",
						radius: ["35%", "60%"],
						center: ["50%", "50%"],
						hoverAnimation: false,
						xAxisIndex:1,
						yAxisIndex: 1, 
						z: 10,
						itemStyle: {
							normal: {
								borderWidth: 3,
								borderColor: "rgba(3, 16, 38, 0.71)"
							}
						},
						label: {
							show: false,
							position: 'inside'
						},
						data: itemData,
						labelLine: {
							show: false
						}
					}]
				};
				myChart.setOption(option); //将编写好的配置项挂载到Echarts上
			}
		},
		mounted() {
			this.myEcharts();
		}
	}
</script>


<style>

</style>
